<div class="alain-default__content-title">
  <h1>
    二维码
    <a href="https://ng.ant.design/components/qr-code" target="_blank">Document</a>
  </h1>
</div>
<nz-card>
  <nz-row [nzGutter]="24">
    <nz-col [nzSpan]="8" class="text-center">
      <nz-qrcode
        [nzValue]="value"
        [nzBgColor]="background"
        [nzColor]="foreground"
        [nzLevel]="level"
        [nzSize]="size"
        [nzPadding]="padding"
      />
    </nz-col>
    <nz-col [nzSpan]="16">
      <form nz-form>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">背景</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-group>
              <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{ standalone: true }" style="width: 100px" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">前景</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-group>
              <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{ standalone: true }" style="width: 100px" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">误差</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select [(ngModel)]="level" [ngModelOptions]="{ standalone: true }">
              <nz-option nzValue="L" nzLabel="L" />
              <nz-option nzValue="M" nzLabel="M" />
              <nz-option nzValue="Q" nzLabel="Q" />
              <nz-option nzValue="H" nzLabel="H" />
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">内边距</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-number [(ngModel)]="padding" [ngModelOptions]="{ standalone: true }" [nzMin]="0" [nzMax]="100" />px
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">大小</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-input-number [(ngModel)]="size" [ngModelOptions]="{ standalone: true }" [nzMin]="100" [nzMax]="1000" [nzStep]="padding" />px
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-col>
  </nz-row>
</nz-card>
